<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" 
      xmlns:ui="http://java.sun.com/jsf/facelets" 
      xmlns:h="http://java.sun.com/jsf/html" 
      xmlns:f="http://java.sun.com/jsf/core">
<h:head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<link href="#{facesContext.externalContext.requestContextPath}/css/style.css" rel="stylesheet" type="text/css" />
	<script language="JavaScript" type="text/javascript" src="#{facesContext.externalContext.requestContextPath}/js/jquery.js"></script>
	<title>#{msg.title}</title>
</h:head>
<h:body>

	<div class="top">
		<h:link outcome="index"><h:graphicImage value="/Image?name=logo" /></h:link>
		<div class="menu">
		<ul>
			<li><h:link value="#{msg.home}" outcome="index"/></li>
			<li><h:link value="#{msg.myweather}" outcome="welcome"/></li>
			<li><h:link value="#{msg.register}" outcome="register"/></li>
		</ul>
		</div>
	</div>
	
	<div class="content">
		<div class="map">
			<h:graphicImage onclick="getMouseXY(event)" id="mapa" value="/MapImage"/>
			<f:view>

				<script type="text/javascript">
					document.captureEvents(Event.MOUSEMOVE);
					// Temporary variables to hold mouse x-y pos.s
					var tempX = 0;
					var tempY = 0;
	
					// Main function to retrieve mouse x-y pos.s
					function getMouseXY(e) {
						tempX = e.offsetX;
						tempY = e.offsetY;
						window.open("#{facesContext.externalContext.requestContextPath}/window.xhtml?m=1&amp;x="+tempX+"&amp;y="+tempY, "Dane miasta", "status=0, toolbar=0, menubar=0, resizable=0, width=325, height=190");

						return true;
					}
					f = function() {
						$("#mapa").attr("src", "/MapImage?timestamp="+new Date().getTime());
						setTimeout(f, 5*60*1000);
					}
					$(document).ready(function() { setTimeout(f, 5*60*1000); });
				</script>
			</f:view>
		</div>	
		<div class="right">
			<div class="right_text">
				<ui:insert name="right" />
			</div>
			<div class="checkMap"><table><tr><td><h:graphicImage value="/Image?name=arrow" /></td><td>#{msg.checkCondition}</td></tr></table></div>
		</div>
		
		<div class="text">		
			<ui:insert name="text" />
		</div>	
		<div class="footer">		
			<h:outputText value="#{msg.copyright}" />
		</div>	
	</div>

</h:body>   
</html>